/*
* @Descripttion: 运费管理
* @version:
* @Author: 张文韬
* @Date: 2020-10-11 18:38:07
* @LastEditors: 张文韬
* @LastEditTime: 2020-11-06 13:46:29
*/
<template>
  <el-card>
    <el-button type="primary" @click="handleAddItem">添加</el-button>
    <el-row :gutter="20">
      <el-col :span="12" v-for="(item, index) in datas" :key="index">
        <el-card class="card-item" shadow="hover">
          <el-row>
            <el-col :span="20">
              <el-col class="emall-name">{{item.supplierName}}</el-col>
              <el-col :gutter="15" class="price-freight-area">
                <el-col :span="2" class="price-number">{{item.firstPrice}}</el-col>
                <el-col :span="5" class="price-range">
                  <div class="shipping-number">{{item.firstIntervalFreight}}元</div>
                  <div class="divtest"></div>
                </el-col>
                <el-col :span="2" class="price-number">{{item.secondPrice}}</el-col>
                <el-col :span="5" class="price-range">
                  <div class="shipping-number">{{item.secondIntervalFreight}}元</div>
                  <div class="divtest"></div>
                </el-col>
                <el-col :span="2" class="price-number">{{item.thirdPrice}}</el-col>
                <el-col :span="5" class="price-range">
                  <div class="shipping-number">{{item.thirdIntervalFreight}}元</div>
                  <div class="divtest"></div>
                </el-col>
                <el-col :span="3" class="price-number">{{item.fourthPrice}}</el-col>
              </el-col>
            </el-col>
            <el-col :span="4" class="settingBtn">
              <template>
                <el-button type="primary" round @click="handleEditItem(item)">设置</el-button>
              </template>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <!--<el-pagination-->
        <!--@size-change="handleSizeChange"-->
        <!--@current-change="handleCurrentChange"-->
        <!--:current-page="pageInfo.pageNum"-->
        <!--:page-size="pageInfo.pageSize"-->
        <!--layout="total, sizes, prev, pager, next, jumper"-->
        <!--:total="totalPage"-->
    <!--&gt;</el-pagination>-->
    <!-- editDialog 编辑弹窗 START -->
    <el-dialog :title="editDialogTitle"
               :visible.sync="editDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               @close="cancelDialogDataHandle"
               width="850px">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="editFormRules">
        <el-form-item label="电商选择" :label-width="formLabelWidth">
          <el-select v-model="dialogForm.supplierId" :value="dialogForm.supplierId" placeholder="请选择电商" filterable :disabled="selectDisable">
            <el-option :label="item.orgNameZhShort?item.orgNameZhShort:item.orgNameZh" :value="item.id" v-for="(item) in suppliers" :key="item.id"></el-option>
          </el-select>
          <el-row>
            <el-col :span="16" class="input-form-box">
              <el-col :span="24" class="emall-name">价格区间</el-col>
              <el-col :span="10" class="input-form-item"><el-input-number v-model="dialogForm.firstPrice" :min="0" :precision="2" :controls="false" size="small" :disabled="true"></el-input-number></el-col>
              <el-col :span="4" class="input-form-item"><span class="lt">&lt;</span>至<span class="lt">&lt;=</span></el-col>
              <el-col :span="10" class="input-form-item"><el-input-number v-model="dialogForm.secondPrice" :min="0" :precision="2" :controls="false" size="small"></el-input-number></el-col>
              <el-col :span="10" class="input-form-item"><el-input-number v-model="dialogForm.secondPrice" :min="0" :precision="2" :controls="false" size="small"></el-input-number></el-col>
              <el-col :span="4" class="input-form-item"><span class="lt">&lt;</span>至<span class="lt">&lt;</span></el-col>
              <el-col :span="10" class="input-form-item"><el-input-number v-model="dialogForm.thirdPrice" :min="0" :precision="2" :controls="false" size="small"></el-input-number></el-col>
              <el-col :span="10" class="input-form-item"><el-input-number v-model="dialogForm.thirdPrice" :min="0" :precision="2" :controls="false" size="small"></el-input-number></el-col>
              <el-col :span="4" class="input-form-item"><span class="lt">&lt;=</span>至<span class="lt">&lt;</span></el-col>
              <el-col :span="10" class="input-form-item"><el-input class="text-center" v-model="dialogForm.fourthPrice" size="small" :disabled="true"></el-input></el-col>
            </el-col>
            <el-col :span="8" class="input-form-box">
              <el-col :span="24" class="emall-name">运费</el-col>
              <el-col :span="20" class="input-form-item"><el-input-number v-model="dialogForm.firstIntervalFreight" :min="0" :precision="2" :controls="false" size="small"></el-input-number></el-col>
              <el-col :span="4" class="input-form-item">元</el-col>
              <el-col :span="20" class="input-form-item"><el-input-number v-model="dialogForm.secondIntervalFreight" :min="0" :precision="2" :controls="false" size="small"></el-input-number></el-col>
              <el-col :span="4" class="input-form-item">元</el-col>
              <el-col :span="20" class="input-form-item"><el-input-number v-model="dialogForm.thirdIntervalFreight" :min="0" :precision="2" :controls="false" size="small" ></el-input-number></el-col>
              <el-col :span="4" class="input-form-item">元</el-col>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelDialogDataHandle">取 消</el-button>
        <el-button type="primary"
                   @click="saveDialogDataHandle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- editDialog 编辑弹窗 END -->
  </el-card>
</template>

<script>
import {
  getFreightList,
  setFreightPrice,
  getSuppliers
} from '@/api/admin.api'
  export default {
    name: 'freight-manager',
    components: {
    },
    data() {
      return {
        // 数据源
        datas: [],
        // 供应商数据
        suppliers: [],
        // 分页信息
        pageInfo: {
          pageNum: 1,
          pageSize: 6
        },
        totalPage: 1,

        // 添加或设置弹出
        editDialogShow: false,
        // 弹窗中下拉框是否禁用
        selectDisable: true,
        editDialogTitle: '添加',
        // 弹出表单数据
        dialogForm: {},
        editFormRules: {},
        formLabelWidth: "80"
      }
    },
    methods: {
      // 初始化数据
      getDataList () {
        getFreightList().then(res=>{
          this.datas = res
        })
        getSuppliers().then(res=>{
          this.suppliers = res
        })
      },
      // 重置表单数据
      resetInitFormData () {
        this.dialogForm = {
          firstIntervalFreight: 0,
          firstPrice: 0,
          fourthPrice: "不限",
          id: null,
          secondIntervalFreight: 0,
          secondPrice: 0,
          supplierId: "",
          supplierName: "",
          thirdIntervalFreight: 0,
          thirdPrice: 0,
        }
      },
      // 提交数据
      submitData () {
        let temp = this.dialogForm
        if (this.editDialogTitle === '添加') {
          delete temp["id"]
        }
        this.submitSettings(temp)
      },
      // 提交数据  添加/设置
      submitSettings (data) {
        setFreightPrice(data).then(res => {
          this.getDataList ()
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        })
      },
      // 点击添加按钮触发事件
      handleAddItem () {
        this.editDialogTitle = '添加'
        this.selectDisable = false
        this.editDialogShow = true
        this.resetInitFormData()
      },
      // 点击设置按钮触发事件
      handleEditItem (e) {
        this.editDialogTitle = '设置'
        this.selectDisable = true
        let item = this.dialogForm
        item.id = e.id
        item.firstIntervalFreight = e.firstIntervalFreight
        item.secondIntervalFreight = e.secondIntervalFreight
        item.secondPrice = e.secondPrice
        item.supplierId = e.supplierId
        item.supplierName = e.supplierName
        item.thirdIntervalFreight = e.thirdIntervalFreight
        item.thirdPrice = e.thirdPrice
        this.dialogForm = item
        this.editDialogShow = true
      },
      // 分页控制事件
      handleSizeChange(val) {
        this.pageInfo.pageSize = val
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageInfo.pageNum = val
      },
      handleCurrentRowChange(val) {
        console.log(`当前行: ${val}`)
        this.currentRow = val
      },
      cancelDialogDataHandle () {
        this.$refs.dialogFormRef.resetFields()
        this.editDialogShow = false
      },
      // 点击确定按钮保存数据 并进行校验
      saveDialogDataHandle () {
        this.$refs.dialogFormRef.validate((valid)=>{
          if (!valid) return
          if (this.dialogForm.secondPrice === 0 || this.dialogForm.thirdPrice === 0) {
            return this.$alert('价格不能等于零！',
            {
              title: '提示',
              confirmButtonText: '确定',
              type: 'warning'
            })
          }
          if (this.dialogForm.secondPrice >= this.dialogForm.thirdPrice) {
            return this.$alert('请确认价格区间先后顺序！',
            {
              title: '提示',
              confirmButtonText: '确定',
              type: 'warning'
            })
          }
          this.submitData()
          this.editDialogShow = false
          this.$refs.dialogFormRef.resetFields()
        })
      }
    },
    created () {
      this.getDataList()
      this.resetInitFormData()
    }
  }
</script>

<style scoped>
  /*卡片区域样式*/
  .card-item {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #409eff;
  }
  /*电商种类*/
  .emall-name{
    padding: 7px;
    font-size: 20px;
    font-weight: bolder;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #ffffff -1px 0 0, #ffffff 0 -1px 0;
    color: #409eff;
    overflow: hidden;
  }
  /*横线*/
  .divtest{
    margin-top: 5px;
    height: 2px;
    width: 100%;
    background: white;
  }

  .price-freight-area {
    padding: 10px 0px;
  }
  /*价格区域数字*/
  .price-number{
    color: white;
    margin-top: 12px;
    font-size: 18px;
    text-align: center;
  }
  /*价格区间盒子*/
  .price-range{
    text-align: center;
  }
  /*运费*/
  .shipping-number{
    color: white;
  }
  /*设置按钮*/
  .settingBtn{
    /*display: flex;*/
    /*align-content: center;*/
    margin-top: 30px;
    text-align: right;
  }
  .input-form-box{
    padding: 10px 10%;
    text-align: center;
  }
  .input-form-item{
    margin: 10px auto;
  }
  .el-pagination{
    margin-top: 20px;
  }
  .text-center{
    text-align: center;
    width: 130px;
  }
</style>
<style lang="scss" scoped>
  .lt{
    margin: 0 5px;
    color: $--color-danger;
  }
</style>
